@import '../../../themes/mixins/error-message';
@import '../../../themes/mixins/link';

.supportGuide {
  h1 {
    color: var(--theme-support-settings-text-color);
    font-family: var(--font-semibold);
    font-size: 18px;
    line-height: 1.38;
    margin-bottom: 11px;
  }

  h2 {
    color: var(--theme-support-settings-text-color);
    font-family: var(--font-semibold);
    font-size: 16px;
    line-height: 1.38;
    margin-bottom: 6px;
  }

  ol {
    color: var(--theme-main-body-messages-color);
    font-family: var(--font-semibold);
    list-style: decimal;
    padding-left: 30px;

    li {
      font-family: var(--font-medium);
      padding-left: 12px;
    }
  }

  p {
    color: var(--theme-support-settings-text-color);
    font-family: var(--font-light);
    font-size: 16px;
  }

  .faqLink {
    align-items: center;
    display: inline-flex;
  }

  .externalLink {
    font-family: var(--font-regular);
    font-size: 16px;
    margin-right: 4px;
    word-break: break-word;

    &.disabled {
      cursor: default;
      opacity: 0.3;
    }
  }

  p {
    line-height: 1.38;
    margin-bottom: 11px;

    & + h1 {
      margin-top: 24px;
    }
  }
}

.analyticsSectionTitle {
  color: var(--theme-main-body-messages-color);
  font-family: var(--font-medium);
  margin-bottom: 14px;
}

.analyticsSectionDescription {
  color: var(--theme-main-body-messages-color);
  font-family: var(--font-light);
  font-size: 16px;
  line-height: 1.43;
}

.changeAnalyticsSettingsLink {
  font-family: var(--font-regular);
  // unfortunately, global overrides for link component set it to 14px with higher specificity
  font-size: 16px !important;
  word-break: break-word;
}
